﻿<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 
  <title>MonyBot</title> 
  <style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
.msg-list {
position: relative;
width: 90%;
margin: 0 auto;
}
.msg-list ul {
padding: 10px;
min-height: 400px;
max-height: 600px;
/*滚动条*/
overflow-y: auto;
border: 1px solid #ddd;
}

.msg-list li {
float: left;
clear: both;
margin: 10px 0;
padding: 5px;
line-height: 2;
border-radius: 5px;
background-color: #efefef;
}

.msg-list li.active {
float: right;
background-color: #58bc58;
color: #fff;
}

.msg-list textarea {
display: block;
min-height: 50px;
margin: 10px 0;
width: 100%;
box-sizing: border-box;
}

.status {
display: none;
position: absolute;
left: 0;
bottom: 0;
right: 0;
padding: 5px 10px;
text-align: center;
color: #999;
}
</style> 
  <script>
  window.onload = function() {
  var auto = document.getElementById("auto");
  var dialog = auto.children[0];
  var texInput = auto.children[1];
  var but = auto.children[2];
  var status = auto.children[3];
  var arrq = ["你好", "你叫什么", "你几岁了", "你姓什么", "你来自哪里"];
  var arra = ["你好哇", "我是元气满满的萌妹子", "你问这个干什么", "尼古拉·阿列克谢耶维奇·奥斯特洛夫斯基", "我在你的内心深处"]; //回答数组
  function creat() {
    var val = texInput.value.trim();
    if (val) {
      //非空
      var li = document.createElement("li");
      li.innerHTML = val;
      li.className = "active";
      dialog.appendChild(li);
      dialog.scrollTop = dialog.scrollHeight - dialog.offsetHeight - 2;
      texInput.value = "";
      texInput.focus();
      status.style.display = "block";
      var atex = "";
      var index = arrq.indexOf(val);
      if (index >= 0) {
        atex = arra[index];
      } else {
        atex = "未找到有关信息";
      }
      var ali = document.createElement("li"); //创建节点 回答节点
      ali.innerHTML = atex;
      setTimeout(function() {
        dialog.appendChild(ali); //插入节点
        status.style.display = "none"; //隐藏div
        dialog.scrollTop = dialog.scrollHeight - dialog.offsetHeight - 2; //计算可视窗口需要滚动的距离。
      },
      1000);
    } else {
      
    }

  }
  but.onclick = function() {
    creat();
  }
  texInput.onkeydown = function(ev) {
    if (ev.keyCode == 13) {
      creat();
    }
    return false;
  }

}
</script> 
 </head> 
 <body> 
  <div id="auto" class="msg-list"> 
   <ul> 
    <li>I'm Mony Bot, Developed By <a href="https://mnis.gitee.io/">Mnis</a></li> 
    <li class="active">使用指引</li>
    <li>Developing...</li>
   </ul> 
   <textarea></textarea>
   <button>发送</button> 
   <div class="status">
    Bot思考中...
   </div> 
  </div>  
 </body>
</html>